<div class="main">
    <mat-card data-cy="resource-info" *ngFor="let resource of resources">
        <mat-card-header class="colored-title">
            <mat-card-title>{{resource.name}}</mat-card-title>
            <mat-card-subtitle>Cluster Resource</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <table class="aligned">
                <tr data-cy="resource-deploy-startup">
                    <td>Deploy at Startup:</td>
                    <td *ngIf="resource.deployByDefault == 'always'"><code>Yes, forced</code></td>
                    <td *ngIf="resource.deployByDefault == 'undefined' && resource.orphan"><code>Yes, the resource is not referenced by any command</code></td>
                    <td *ngIf="resource.deployByDefault == 'undefined' && !resource.orphan"><code>No, the resource is referenced by a command</code></td>
                    <td *ngIf="resource.deployByDefault == 'never'"><code>No, disabled</code></td>
                </tr>
            </table>
            <div *ngIf="resource.uri">URI: <code>{{resource.uri}}</code></div>
            <div *ngIf="resource.inlined"><pre>{{resource.inlined}}</pre></div>
        </mat-card-content>

        <mat-card-actions>
            <button mat-button color="warn" (click)="delete(resource.name)">Delete</button>
            <button data-cy="resource-edit" mat-button (click)="edit(resource)">Edit</button>
        </mat-card-actions>

    </mat-card>

    <app-resource 
        *ngIf="forceDisplayForm || resources == undefined || resources.length == 0"
        [cancelable]="forceDisplayForm"
        (canceled)="undisplayAddForm()"
        (created)="onCreated($event)"
        [resource]="editingResource"
        (saved)="onSaved($event)"
    ></app-resource>
</div>


<ng-container *ngIf="!forceDisplayForm && resources != undefined && resources.length > 0">
    <button class="fab" mat-fab color="primary" (click)="displayAddForm()">
        <mat-icon class="material-icons-outlined">add</mat-icon>
    </button>
</ng-container>
